<template>
  <div>
    <CheckboxGroup
      class="toggle-list"
      v-model="pageStatus"
      @on-change="routePageStatus"
      v-show="visible.toggleList"
    >
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.camera">
          <Checkbox label="Cameras">
            <i class="icon icon-camera"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">摄像头</div>
          <div class="subtitle">Cameras</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.bus">
          <Checkbox label="Buses">
            <i class="icon icon-bus"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">公交车</div>
          <div class="subtitle">Buses</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.broadcaster">
          <Checkbox label="Broadcasters">
            <i class="icon icon-broadcaster"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">广播</div>
          <div class="subtitle">Broadcasters</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.restroom">
          <Checkbox label="Restrooms">
            <i class="icon icon-restroom"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">驿站</div>
          <div class="subtitle">Restrooms</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" theme="light">
        <Badge :count="warningCount.serviceFacilities">
          <Checkbox label="ServiceFacilities">
            <i class="icon icon-service-facilities"></i>
          </Checkbox>
        </Badge>
        <div slot="content">
          <div class="title">服务设施</div>
          <div class="subtitle">
            Service
            <br />facilities
          </div>
        </div>
      </Tooltip>
    </CheckboxGroup>
    <vc-legend
      class="landscape-legend"
      title="选择查看类别"
      icon-name="icon-legend-header"
      v-if="visible.selectViewType"
    >
      <vc-legend-item
        id="poi-bus"
        color="#75D100"
        title="公交车站"
        @on-checked="GetBusStationPOI()"
        @on-unchecked="RemoveBusStationPOI()"
      ></vc-legend-item>
      <vc-legend-item
        id="poi-vending-machine"
        color="#1BABB0"
        title="自动售货机"
        @on-checked="GetAutoSellerPOI()"
        @on-unchecked="RemoveAutoSellerPOI()"
      ></vc-legend-item>
      <vc-legend-item
        id="poi-intelligent-lamp"
        color="#DCA027"
        title="智慧灯杆"
        @on-checked="GetSmartLampPOI()"
        @on-unchecked="RemoveSmartLampPOI()"
      ></vc-legend-item>
    </vc-legend>
    <!-- <vc-broadcaster
      title="分区广播"
      class="broadcaster landscape"
      v-if="visible.sectionalBroadcast"
    ></vc-broadcaster> -->
    <vw-right>
      <vw-row>
        <vw-box box-name="游客人流监控" box-type="train">
          <p @click="landscapeTz(landscapeTzUrl.first_url)" class="top_gd">更多</p>
          <vw-box-item width="32.33%">
            <vc-icon-card
              icon-name="icon-tourist-on-island"
              title="实时在岛人数"
              :number="dataPanel.touristOnIsland"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="30.33%">
            <vc-icon-card
              icon-name="icon-tourist-entering"
              title="入岛人数"
              :number="dataPanel.touristEntering"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="30.33%">
            <vc-icon-card
              icon-name="icon-tourist-leaving"
              title="离岛人数"
              :number="dataPanel.touristLeaving"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="100%">
            <ve-chart-line-dual v-if="StreamPeopleState"
              id="chart-tourist-flow"
              title="早晚人流情况"
              :chart-data="chartData.touristFlow"
              legend-orient="horizontal"
              :height="140 * ratio"
              class="chart-line-dual landscape chart-index-1"
            ></ve-chart-line-dual>
          </vw-box-item>
          <vw-box-item width="100%">
            <vw-plate title="实时视频" box-type="tower">
              <vw-plate-item width="100%">
                <ul class="grid">
                  <li
                    class="grid-item"
                    v-for="(item, index) in videoSrc.group1"
                    :key="'grd-' + index"
                  >
                    <vm-video-player
                      :src="item.url"
                      :width="166 * ratio"
                      :height="90 * ratio"
                      :title="item.title"
                    ></vm-video-player>
                    <div class="title">{{ videoSrc.group1[index].title }}</div>
                    <button
                      class="c-button icon-button"
                      @click="
                        popVideoWindow(
                          videoSrc.group1[index].url,
                          videoSrc.group1[index].title
                        )
                      "
                    >
                      <i class="icon icon-fullscreen"></i>
                    </button>
                  </li>
                </ul>
              </vw-plate-item>
            </vw-plate>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="游客预约情况" box-type="train">
          <vw-box-item width="30.33%">
            <vc-icon-card
              icon-name="icon-subscribe-today"
              title="今日预约"
              :number="dataPanel.subscribeToday"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="30.33%">
            <vc-icon-card
              icon-name="icon-subscribe-tomorrow"
              title="明日预约"
              :number="dataPanel.subscribeTomorrow"
            ></vc-icon-card>
          </vw-box-item>
          <vw-box-item width="30.33%">
            <vc-icon-card
              icon-name="icon-subscribe-3days"
              title="未来3日预约"
              :number="dataPanel.subscribeIn3Days"
            ></vc-icon-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="游客信息汇总" box-type="train">
          <vw-box-item width="50%">
            <ve-chart-bar-multi v-if="PeopleInfoState"
              id="chart-tourist-sexual"
              :chart-data="chartData.touristSexual"
              :height="145 * ratio"
              type="vertical"
            ></ve-chart-bar-multi>
          </vw-box-item>
          <vw-box-item width="30%">
            <ve-chart-pie
              id="chart-travel-methods"
              :chart-data="chartData.travelMethods"
              :legend="true"
              :height="145 * ratio"
              legend-orient="vertical"
              class="chart-pie chart-index-3 landscape"
            ></ve-chart-pie>
          </vw-box-item>
        </vw-box>
      </vw-row>
      <vw-row>
        <vw-box box-name="公交监控" box-type="train">
          <p @click="landscapeTz(landscapeTzUrl.secend_url)" class="landscape_bottom_gd">更多</p>
          <vw-box-item width="50%">
            <ve-chart-line-dual2
              id="chart-tourist-bus"
              title="今日公交监控"
              :chart-data="chartData.busRunning"
              legend-orient="horizontal"
              :height="172 * ratio"
              class="chart-line-dual landscape chart-index-2"
            ></ve-chart-line-dual2>
          </vw-box-item>
          <vw-box-item width="30%" box-type="tower">
            <vc-icon-card icon-name="icon-bus-running" title="运行中公交车" :number="dataPanel.busOnline"></vc-icon-card>
            <vc-icon-card
              icon-name="icon-bus-operating-today"
              title="今日累计车次"
              :number="dataPanel.busOperatedToday"
            ></vc-icon-card>
            <vc-icon-card
              icon-name="icon-average-operating-duration"
              title="平均运行时间"
              :number="dataPanel.averageOperateDuration"
            ></vc-icon-card>
          </vw-box-item>
        </vw-box>
      </vw-row>
    </vw-right>
    <div class="broadcastRelease-btn" v-if="visible.sectionalBroadcast" @click="landscapeTz(landscapeTzUrl.broadcast_url)">广播发布</div>
  </div>
</template>

<script>
import bus from "@/lib/bus";
import { _Space, _POI } from "@/lib/vmixs";

import { uniFetcherLandscape } from "@/request/uniFetcher.js";
export default {
  name: "",
  data() {
    return {
      //layout
      ratio: JSON.parse(localStorage.ratio),
      //interactive
      pageStatus: [],
      visible: {
        sectionalBroadcast: false,
        selectViewType: false,
        toggleList: true,
      },
      //data
      warningCount: {
        camera: 0,
        bus: 0,
        broadcaster: 0,
        restroom: 0,
        serviceFacilities: 0,
      },
      dataPanel: {
        touristOnIsland: 300,
        touristEntering: 500,
        touristLeaving: 200,
        subscribeToday: 663,
        subscribeTomorrow: 602,
        subscribeIn3Days: 1838,
        busOnline: 602,
        busOperatedToday: 16,
        averageOperateDuration: 60,
      },
      videoSrc: {
        group1: [
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊1",
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊2",
          },
          {
            url: "https://www.w3school.com.cn//i/movie.mp4",
            title: "好大一只熊3",
          },
        ],
      },
      chartData: {
        touristFlow: {},
        touristSexual: {},
        travelMethods: [],
        busRunning: [],
      },
      landscapeTzUrl:{
        first_url:'http://scenery.zggyd.com/#/tourDignosis/touristOverview',
        secend_url:'http://scenery.zggyd.com/#/tourDignosis/vehicleMangage',
        broadcast_url:'http://scenery.zggyd.com/#/tourWeb',
      },
      StreamPeopleState:false,
      PeopleInfoState:false,
    };
  },
  mixins: [_Space, _POI],
  components: {
    "vw-top": () => import("../../layout/Top"),
    "vw-sphere": () => import("../../layout/Sphere"),
    "vc-legend": () => import("../../components/Legend"),
    "vc-legend-item": () => import("../../components/LegendItem"),
    "vc-icon-card": () => import("../../components/IconCard"),
    "vw-plate": () => import("../../layout/Plate"),
    "vw-plate-item": () => import("../../layout/PlateItem"),
    "vm-video-player": () => import("../../components/media/VideoPlayer"),
    "vc-broadcaster": () => import("../../components/media/Broadcaster"),
    "ve-chart-pie": () => import("../../components/echarts/ChartPie"),
    "ve-chart-bar-multi": () =>
      import("../../components/echarts/ChartBarMulti"),
    "ve-chart-line-dual": () =>
      import("../../components/echarts/ChartLineDual"),
    "ve-chart-line-dual2": () =>
      import("../../components/echarts/ChartLineDual2"),
    "ve-chart-line-single": () =>
      import("../../components/echarts/ChartLineSingle"),
  },
  watch: {
    pageStatus: {
      handler(n, o) {
        if (n instanceof Array) {
          let pageStatusName = n[0];
          if (pageStatusName) {
            const statusHashMap = {
              Cameras: this.setState_Cameras,
              Buses: this.setState_Buses,
              Broadcasters: this.setState_Broadcasters,
              Restrooms: this.setState_Restrooms,
              ServiceFacilities: this.setState_ServiceFacilities,
            };
            statusHashMap[n].call();
          } else {
            //执行方法，页面回到初始状态
            this.setState_Initial();
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.declarePageName();
    this.listenWindowEvent();
    this.getBookingPeopleCount();
    this.getStreamPeopleCount();
    this.getPeopleInfoCount();
  },
  methods: {
    goBackInfo(curData, backData,name) {
      console.log("goBackInfo", curData, backData);
      backData[name] = curData.map((o) => {
          if (o.name == null) {
              o.name = "60-75";
            }
        return {
          name: o.name,
          value: parseInt(o.value),
        };
      });
    },
    landscapeTz(tz_lj){
      bus.$emit("open-modal",{
        type:"web",
        url:tz_lj
      })
    },
    declarePageName() {
      bus.$emit("set-sphere-actived", "Landscape");
    },
    getBookingPeopleCount() {
      uniFetcherLandscape.getBookingPeople().then((res) => {
        if (res) {
          console.log("uniFetcherLandscape", res);
          this.dataPanel.subscribeToday = parseInt(res.subscribeToday);
          this.dataPanel.subscribeTomorrow = parseInt(res.subscribeTomorrow);
          this.dataPanel.subscribeIn3Days = parseInt(res.subscribeIn3Days);
        }
      });
    },
    getStreamPeopleCount() {
      uniFetcherLandscape.getStreamPeople().then((res) => {
        if (res) {
          this.dataPanel.touristOnIsland = parseInt(res.touristOnIsland);
          this.dataPanel.touristEntering = parseInt(res.touristEntering);
          this.dataPanel.touristLeaving = parseInt(res.touristLeaving);
          this.goBackInfo(res.upIsland, this.chartData.touristFlow, "上岛(人)");
          this.goBackInfo(res.outIsland, this.chartData.touristFlow, "出岛(人)");
           if (this.chartData.touristFlow["上岛(人)"]) {
            this.StreamPeopleState = true;
          }
          console.log("this.chartData.touristFlow", this.chartData.touristFlow);
        }
      });
    },
    getPeopleInfoCount() {
      uniFetcherLandscape.getPeopleInfo().then((res) => {
        if (res) {
          this.chartData.travelMethods = res.travelMethods;
          console.log(
            "this.chartData.travelMethods",
            this.chartData.travelMethods
          );
             this.goBackInfo(res.man, this.chartData.touristSexual, "男性");
             this.goBackInfo(res.woman, this.chartData.touristSexual, "女性");
         if (this.chartData.touristSexual["男性"]) {
            this.PeopleInfoState = true;
          }
        }
      });
    },
    setState_Initial() {
      //清空场景内的POI，场景镜头聚焦
      this.visible.sectionalBroadcast = false;
      this.visible.selectViewType = false;
      this.InitCamera();
      this.ClearSpace();
      //this.clearUECreatures();
      //this.CameraObj.setOn(this.camera.init);
      this.renderPanel();
    },
    setState_Cameras() {
      //渲染场景内的摄像头POI
      this.ClearSpace();
      //this.clearUECreatures();
      this.visible.sectionalBroadcast = false;
      this.visible.selectViewType = false;
      this.RenderPOI(uniFetcherLandscape.getCameraPOI);
      this.CameraObj.focusOn("POI");
    },
    setState_Buses() {
      //渲染场景内的摄像头POI
      this.ClearSpace();
      //this.clearUECreatures();
      this.visible.sectionalBroadcast = false;
      this.visible.selectViewType = false;
      this.RenderPOI(uniFetcherLandscape.getBusPOI);
      this.CameraObj.focusOn("POI");
    },
    setState_Broadcasters() {

      //渲染场景内的摄像头POI
      this.ClearSpace();
      //this.clearUECreatures();
      this.visible.sectionalBroadcast = true;
      this.visible.selectViewType = false;
      this.RenderPOI(uniFetcherLandscape.getBoradcastPOI);
      this.CameraObj.focusOn("POI");
    },
    setState_Restrooms() {
      //渲染场景内的摄像头POI
      this.ClearSpace();
      //this.clearUECreatures();
      this.visible.sectionalBroadcast = false;
      this.visible.selectViewType = false;
      this.RenderPOI(uniFetcherLandscape.getRestroomPOI);
      this.CameraObj.focusOn("POI");
    },
    setState_ServiceFacilities() {
      //渲染场景内的摄像头POI
      this.ClearSpace();
      //this.clearUECreatures();
      this.visible.sectionalBroadcast = false;
      this.visible.selectViewType = true;
      //this.CameraObj.focusOn('POI');
    },
    GetBusStationPOI() {
      this.RenderPOI(uniFetcherLandscape.getBusStationPOI);
      this.CameraObj.focusOn("POI");
    },
    RemoveBusStationPOI() {
      this.RemovePOI("公交车站");
    },
    GetAutoSellerPOI() {},
    RemoveAutoSellerPOI() {},
    GetSmartLampPOI() {},
    RemoveSmartLampPOI() {},
    renderPanel() {
      // this.chartData.touristFlow = {
      //   "上岛(人)": [
      //     {
      //       name: "06:00",
      //       value: 33
      //     },
      //     {
      //       name: "10:00",
      //       value: 12
      //     },
      //     {
      //       name: "14:00",
      //       value: 46
      //     },
      //     {
      //       name: "18:00",
      //       value: 56
      //     },
      //     {
      //       name: "22:00",
      //       value: 36
      //     }
      //   ],
      //   "出岛(人)": [
      //     {
      //       name: "06:00",
      //       value: 55
      //     },
      //     {
      //       name: "10:00",
      //       value: 58
      //     },
      //     {
      //       name: "14:00",
      //       value: 67
      //     },
      //     {
      //       name: "18:00",
      //       value: 78
      //     },
      //     {
      //       name: "22:00",
      //       value: 39
      //     }
      //   ]
      // };
      // this.chartData.touristSexual = {
      //   男性: [
      //     {
      //       name: "0-15",
      //       value: 32
      //     },
      //     {
      //       name: "15-30",
      //       value: 89
      //     },
      //     {
      //       name: "30-45",
      //       value: 81
      //     },
      //     {
      //       name: "45-60",
      //       value: 65
      //     },
      //     {
      //       name: "60-75",
      //       value: 72
      //     }
      //   ],
      //   女性: [
      //     {
      //       name: "0-15",
      //       value: 17
      //     },
      //     {
      //       name: "15-30",
      //       value: 41
      //     },
      //     {
      //       name: "30-45",
      //       value: 38
      //     },
      //     {
      //       name: "45-60",
      //       value: 32
      //     },
      //     {
      //       name: "60-75",
      //       value: 36
      //     }
      //   ]
      // };
      // this.chartData.travelMethods = [
      //   {
      //     name: "轮渡",
      //     value: 54
      //   },
      //   {
      //     name: "公交",
      //     value: 46
      //   }
      // ];
      this.chartData.busRunning = {
        "运营公交车(辆)": [
          {
            name: "8：00",
            value: 32
          },
          {
            name: "10：00",
            value: 89
          },
          {
            name: "12：00",
            value: 81
          },
          {
            name: "14：00",
            value: 65
          },
          {
            name: "16：00",
            value: 72
          },
          {
            name: "18：00",
            value: 72
          }
        ],
        "站点人数(人)": [
          {
            name: "8：00",
            value: 20
          },
          {
            name: "10：00",
            value: 3
          },
          {
            name: "12：00",
            value: 6
          },
          {
            name: "14：00",
            value: 14
          },
          {
            name: "16：00",
            value: 7
          },
          {
            name: "18：00",
            value: 40
          }
        ]
      };
    },
    HandlePOIClicked(id) {
      let poi = this.Rendered.find((e) => {
        return e.id === id;
      });
      poi.focus();
      //条件逻辑
      //1、公交车类型的POI，调用RenderBusModel方法
    },
    routePageStatus() {
      this.pageStatus = [this.pageStatus.tail()];
    },
    listenWindowEvent() {
      bus.$on("window-event", (msg) => {
        //监听“查看历史轨迹”按钮点击后的事件
        //条件逻辑
        //1、查看大视频： bus.$emit('open-modal',{type:'video',url,title})
      });
    },
    RenderBusModel(params) {
      //公交车类型的POI，调用公交车非标API渲染公交车模型
    },
    popVideoWindow(url, title) {
      bus.$emit("open-modal", {
        type: "video",
        url,
        title,
      });
    },
  },
};
</script>

<style lang="" scoped>
</style>